<template>
  <el-scrollbar height="600px">
    <div class="xml-content content-loading">
      <!-- <ul class="layui-fixbar">
        <a href="#test" target="_self">
          <li
            class="layui-icon layui-fixbar-top"
            lay-type="top"
            style="display: list-item"
          >
            
          </li>
        </a>
      </ul> -->

      <div id="test"></div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { getSpeciesXmlById } from '@/api/index.js'
import { reactive, ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core'
const route = useRoute()

const query = route.path.split('/')[route.path.split('/').length - 1]
const state = reactive({
  jsonData: []
})

getSpeciesXmlById(query)
  .then((result) => {
    // console.log(JSON.parse(result.json))
    state.jsonData = JSON.parse(result.json)
    show_xml(state.jsonData)
  })
  .catch((err) => {
    console.log(err)
  })

function show_xml(data) {
  // var obj = data['experiment_package_set']['experiment_package'];
  var obj = data
  var main = document.createElement('div')
  main.setAttribute('class', 'layui-collapse')
  for (let key in obj) {
    var item = document.createElement('div')
    item.setAttribute('class', 'layui-colla-item')
    let title = document.createElement('h2')
    title.setAttribute('class', 'layui-colla-title')
    title.innerHTML = key
    let content = document.createElement('div')
    content.setAttribute('class', 'layui-colla-content layui-show')
    let p = document.createElement('p')
    p.appendChild(build_content(key, obj[key]))
    // p.innerHTML = JSON.stringify(obj[key]);
    content.appendChild(p)
    item.appendChild(title)
    item.appendChild(content)
    main.appendChild(item)
  }
  // $('#test').empty()

  document.getElementById('test').appendChild(main)

  layui.use('element', function () {
    var element = layui.element
    element.render('#test')
  })
}
function get_object_type(obj) {
  if (Object.keys(obj).length == 1) {
    if (Object.values(obj)[0] instanceof Array) return 'array'
    else if (Object.values(obj)[0] instanceof Object) return 'nested'
    else return 'simple'
  } else {
    return 'multiple'
  }
}

function build_content(kind, data) {
  let dl = document.createElement('dl')
  for (let key in data) {
    // if(key.indexOf('@')!=-1)
    // 	continue;
    let dt = document.createElement('dt')
    dt.innerHTML = key
    let dd = document.createElement('dd')
    if (data[key] instanceof Object) {
      // key:value 都为简单字符串类型的数据
      // if(get_object_type(data[key])=='simple')
      // 	dd.innerHTML = simple_content(data[key]);
      // else
      // 	dd.innerHTML = JSON.stringify(data[key]);
      dd.appendChild(complex_content(data[key]))
    } else {
      dd.innerHTML = data[key]
    }
    dl.appendChild(dt)
    dl.appendChild(dd)
  }
  return dl
}

function simple_content(obj) {
  let key = Object.keys(obj)[0]
  let value = obj[key]
  let div = document.createElement('div')
  div.setAttribute('class', 'layui-row')
  if (value == null || value.length < 100) {
    div.setAttribute('class', 'short-text')
    div.innerHTML = key + ' = ' + value
  } else {
    div.setAttribute('class', 'long-text')
    div.innerHTML = '<b>' + key + '</b>:  <i>' + value + '</i>'
    // div.innerHTML += "<hr>";
  }
  return div
}

function complex_content(obj) {
  let obj_type = get_object_type(obj)
  let div = null
  if (obj_type == 'simple') {
    return simple_content(obj)
  } else if (obj_type == 'nested') {
    div = document.createElement('div')
    div.setAttribute('class', 'layui-row nested-div')
    let span = document.createElement('span')
    span.innerHTML = '<b>' + Object.keys(obj)[0] + '</b>'
    div.appendChild(span)
    div.appendChild(complex_content(Object.values(obj)[0]))
  } else if (obj_type == 'array') {
    div = document.createElement('div')
    div.setAttribute('class', 'layui-row array-div')
    let span = document.createElement('span')
    span.setAttribute('class', 'table_name')
    span.innerHTML = Object.keys(obj)[0]
    div.appendChild(span)
    div.setAttribute('class', 'div_has_table')
    div.appendChild(array_content(Object.values(obj)[0]))
  } else {
    div = document.createElement('div')
    div.setAttribute('class', 'layui-row other-div')
    // div.innerHTML = 'complex';
    // ul = document.createElement("ul");
    for (let key in obj) {
      let child = new Object()
      child[key] = obj[key]
      // li = document.createElement("li");
      div.appendChild(complex_content(child))
      // ul.appendChild(li);
    }
    // div.appendChild(ul);
  }
  return div
}

function array_content(array) {
  let table = document.createElement('table')
  table.setAttribute('class', 'layui-table')
  let thead = document.createElement('thead')
  let keys = Object.keys(array[0])
  for (let k of keys) {
    let th = document.createElement('th')
    th.innerHTML = k
    thead.appendChild(th)
  }
  let tbody = document.createElement('tbody')
  for (let ele of array) {
    let tr = document.createElement('tr')
    for (let k of keys) {
      let td = document.createElement('td')
      td.innerHTML = ele[k]
      tr.appendChild(td)
    }
    tbody.appendChild(tr)
  }
  table.appendChild(thead)
  table.appendChild(tbody)
  return table
}
const activeNames = ref(['1'])
const handleChange = (val) => {
  console.log(val)
}
</script>

<style lang="scss">
.xml-content {
  margin: 10px 10px 100px 10px;
}
dt {
  width: 11em;
  font-weight: bold;
  float: left;
  text-align: right;
  clear: left;
  line-height: 1.5em;
  white-space: nowrap;
}

dd {
  margin-left: 11em;
  padding-left: 1em;
  padding-right: 1em;
  line-height: 1.5em;
}

.layui-row .layui-row .layui-row {
  padding-left: 10px;
}

.layui-table td,
.layui-table th {
  line-height: 10px;
}

.layui-row span.table_name {
  background-color: lightblue;
  float: left;
  width: -webkit-fill-available;
  text-align: center;
  margin-top: 10px;
}

.layui-table thead {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(100%, #f0f0f0)
  );
}

.layui-colla-title {
  font-size: 18px;
}

dd > div.layui-row:first-child {
  display: flow-root;
}

.layui-colla-item:not(:last-child) {
  margin-bottom: 10px;
}

.layui-table td,
.layui-table th {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

div.div_has_table {
  overflow: auto;
}

dd > div.other-div > div.nested-div {
  margin-bottom: 5px;
  background: aliceblue;
  padding: 5px;
  border: 1px solid silver;
  margin: 10px;
}

.long-text {
  background: antiquewhite;
  padding: 5px;
  margin: 5px;
  border: 1px solid silver;
}
</style>